<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/metrize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/polaris/polaris.css" rel="stylesheet">
    <link href="css/square/blue.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="header-content header-fixed bg-white clearfix">
    <!--  Logo -->
    <div class="logo bg-dark">
        <a href="#"><span class="logo-icon fa fa-th-large"></span> <span class="logo-text">JP</span></a>
    </div>

    <div class="top-nav">
        <ul class="list-none nav-left">
            <!-- to left menu -->
            <li class="unshow"><a class="toggle-min jp-gray jp-ripple" href="#"><i class="fa fa-bars"></i></a></li>
            <!-- dropdown settings -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown" id="dropdownMenu2"><i class="fa fa-gear"></i></a>
                <div class="dropdown-menu panel panel-default with-arrow" aria-labelledby="dropdownMenu2">
                    <div class="panel-heading"><span>Setting</span></div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <p>User setting</p>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <p>User setting</p>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option1"> 2
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option1"> 3
                            </label>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-truck"></i></a></li>
        </ul>

        <ul class="list-none nav-right pull-right">
            <!-- user info-->
            <li class="nav-profile dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown"><img src="img/t.jpg" class="img-circle img30_30" /> <span class="hidden-xs">LISA</span></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#"><i class="fa fa-dashboard"></i>Action</a></li>
                    <li><a href="#"><i class="fa fa-television"></i>Another action</a></li>
                    <li><a href="#"><i class="fa fa-file-o"></i>Something else here</a></li>
                    <li><a href="#"><i class="fa fa-table"></i>Separated link</a></li>
                </ul>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-wifi"></i></a></li>
        </ul>
    </div>

</header>
<div class="main-content">
    <!-- left nav -->
    <div class="nav-content bg-dark nav-vertical">
        <ul class="left-menu list-none">
            <li class="user-info">
                <div class="user-panel">
                    <div class="pull-left">
                        <img src="img/t.jpg" class="img-circle img45_45"/>
                    </div>
                    <div class="pull-left info">
                        <p>welcome,admin</p>
                        <a href="#"><i class="fa fa-circle"></i> online</a>
                    </div>
                </div>
                <form class="search-form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" />
                        <span class="input-group-btn">
                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </li>
            <li class="treeview ">
                <a href="main.html" class="jp-ripple"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
            </li>
            <li class="treeview active">
                <a href="#" class="jp-ripple"><i class="fa fa-television"></i><span>JP UI</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Buttons.html" ><i class="fa fa-circle ng-scope"></i><span>Buttons</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Icons.html" ><i class="fa fa-circle ng-scope"></i><span>Icons</span></a></li>
                    <li class="jp-ripple"><a href="Typography.html" ><i class="fa fa-circle ng-scope"></i><span>Typography</span></a></li>
                    <li class="jp-ripple"><a href="Lists.html"><i class="fa fa-circle ng-scope"></i><span>Lists</span></a></li>
                    <li class="jp-ripple"><a href="Forms.html"><i class="fa fa-circle ng-scope"></i><span>Forms</span></a></li>
                    <li class="active jp-ripple"><a href="Components.html" ><i class="fa fa-circle ng-scope"></i><span>Components</span></a></li>
                    <li class="jp-ripple"><a href="Panels.html" ><i class="fa fa-circle ng-scope"></i><span>Panels</span></a></li>
                    <li class="jp-ripple"><a href="Grids.html"><i class="fa fa-circle ng-scope"></i><span>Grids</span></a></li>
                    <li class="jp-ripple"><a href="Timeline.html"><i class="fa fa-circle ng-scope"></i><span>Timeline</span></a></li>
                    <li class="jp-ripple"><a href="Tree.html"><i class="fa fa-circle ng-scope"></i><span>Tree</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-file-o"></i><span>Pages</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="SignIn.html"><i class="fa fa-circle ng-scope"></i><span>Sign In</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="SignUp.html"><i class="fa fa-circle ng-scope"></i><span>Sign Up</span></a></li>
                    <li class="jp-ripple"><a href="ForgotPassword.html"><i class="fa fa-circle ng-scope"></i><span>Forgot Password</span></a></li>
                    <li class="jp-ripple"><a href="404.html"><i class="fa fa-circle ng-scope"></i><span>404 Error</span></a></li>
                    <li class="jp-ripple"><a href="500.html"><i class="fa fa-circle ng-scope"></i><span>500 Error</span></a></li>
                    <li class="jp-ripple"><a href="Blank.html"><i class="fa fa-circle ng-scope"></i><span>Blank Page</span></a></li>
                    <li class="jp-ripple"><a href="Profile.html"><i class="fa fa-circle ng-scope"></i><span>Profile</span></a></li>
                    <li class="jp-ripple"><a href="Invoice.html"><i class="fa fa-circle ng-scope"></i><span>Invoice</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-table"></i><span>Tables</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Basetable.html"><i class="fa fa-circle ng-scope"></i><span>Base Table</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Responsivetables.html"><i class="fa fa-circle ng-scope"></i><span>Responsive Tables</span></a></li>
                    <li class="jp-ripple"><a href="DataTables.html"><i class="fa fa-circle ng-scope"></i><span>Data Tables</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-pencil"></i><span>Forms</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="FormComponents.html"><i class="fa fa-circle ng-scope"></i><span>Form Components</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="WizardForm.html"><i class="fa fa-circle ng-scope"></i><span>Wizard Form</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-bar-chart"></i><span>Charts</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="EChartsLine.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Line</span></a></li>
                    <li class="jp-ripple"><a href="EChartsBar.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Bar</span><span class="badge badge-primary ng-scope">5</span></a></li>
                    <li class="jp-ripple"><a href="EChartsPie.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Pie</span></a></li>
                    <li class="jp-ripple"><a href="EChartsScatter.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Scatter</span></a></li>
                </ul>
            </li>
            <li class="menu-divider"></li>
            <li class="nav-title">
                <span>Title</span>
            </li>
            <li class="li-sm active">
                <a href="#"><i class="fa fa-circle color-info"></i><span>JP Components</span></a>
            </li>
            <li class="li-sm treeview">
                <a href="#"><i class="fa fa-circle color-success"></i><span>JP Elements</span></a>
            </li>
        </ul>

    </div>
    <!-- content -->
    <div class="content">
        <section class="jppage">

            <!-- Dialog -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Dialog</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="col-md-2">
                                <button type="button" class="jp-btn jp-primary jp-sw jp-ripple" data-toggle="modal" data-target="#myModal">
                                    Launch demo modal
                                </button>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="jp-btn jp-success jp-sw jp-ripple" data-toggle="modal" data-target="#myModa2">
                                    normal modal
                                </button>
                            </div>

                            <div class="col-md-2">
                                <button type="button" class="jp-btn jp-success jp-sw jp-ripple" data-toggle="modal" data-target="#myModa3">
                                    small modal
                                </button>
                            </div>


                            <!-- Modal -->
                            <div class="modal fade modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">


                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">Modal title</h4>
                                        </div>
                                        <div class="modal-body">
                                            To take advantage of the Bootstrap grid system within a modal, just nest .container-fluid within the .modal-body and then use the normal grid system classes within this container.
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="jp-btn jp-default jp-sw jp-w" data-dismiss="modal">Close</button>
                                            <button type="button" class="jp-btn jp-primary jp-sw jp-w">Save changes</button>
                                        </div>


                            </div>

                            <div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">


                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" >Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    To take advantage of the Bootstrap grid system within a modal, just nest .container-fluid within the .modal-body and then use the normal grid system classes within this container.
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="jp-btn jp-default jp-sw" data-dismiss="modal">Close</button>
                                    <button type="button" class="jp-btn jp-primary jp-sw">Save changes</button>
                                </div>


                            </div>

                            <div class="modal fade modal-sm" id="myModa3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">


                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" >Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    To take advantage of the Bootstrap grid system within a modal, just nest .container-fluid within the .modal-body and then use the normal grid system classes within this container.
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="jp-btn jp-default jp-sw" data-dismiss="modal">Close</button>
                                    <button type="button" class="jp-btn jp-primary jp-sw">Save changes</button>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tooltip -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Tooltip</h2>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="col-md-12 text-center">
                                <button class="jp-btn jp-fb jp-danger jp-sw jp-ripple jp-w" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                                    <i class="fa fa-thumbs-up"></i>
                                </button>
                                <button class="jp-btn jp-fb jp-dark jp-sw jp-ripple jp-w" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                                    <i class="fa fa-star-half-o"></i>
                                </button>
                                <button class="jp-btn jp-fb jp-success jp-sw jp-ripple jp-w" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                                    <i class="fa fa-shopping-cart"></i>
                                </button>
                                <button class="jp-btn jp-fb jp-primary jp-sw jp-ripple jp-w" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                                    <i class="fa fa-unlock-alt"></i>
                                </button>
                            </div>

                            <div class="col-md-12">
                                <div class="jp-callout jp-b-success">
                                    <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
                                    <p>Tooltips with zero-length titles are never displayed.</p>
                                </div>
                                <div class="jp-callout jp-b-system">
                                    <p>Static tooltip,Four options are available: top, right, bottom, and left aligned.</p>
                                </div>
                                <div class="static-tooltips">
                                    <div class="tooltip left" role="tooltip">
                                        <div class="tooltip-arrow"></div>
                                        <div class="tooltip-inner">
                                            Tooltip on the left
                                        </div>
                                    </div>

                                    <div class="tooltip top" role="tooltip">
                                        <div class="tooltip-arrow"></div>
                                        <div class="tooltip-inner">
                                            Tooltip on the top
                                        </div>
                                    </div>

                                    <div class="tooltip bottom" role="tooltip">
                                        <div class="tooltip-arrow"></div>
                                        <div class="tooltip-inner">
                                            Tooltip on the bottom
                                        </div>
                                    </div>

                                    <div class="tooltip right" role="tooltip">
                                        <div class="tooltip-arrow"></div>
                                        <div class="tooltip-inner">
                                            Tooltip on the right
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


            <!-- Popovers -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Popovers</h2>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default panel-popover">
                        <div class="panel-body">

                            <div class="col-md-12">
                                <div class="jp-callout jp-b-system">

                                    <p>Static Popovers,Four options are available: top, right, bottom, and left aligned.</p>


                                </div>
                                <div class="static-popovers clearfix">
                                    <div class="popover top">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title">Popover top</h3>
                                        <div class="popover-content">
                                            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                                        </div>
                                    </div>
                                    <div class="popover right">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title">Popover right</h3>
                                        <div class="popover-content">
                                            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                                        </div>
                                    </div>

                                    <div class="popover bottom">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title">Popover bottom</h3>

                                        <div class="popover-content">
                                            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                                        </div>
                                    </div>

                                    <div class="popover left">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title">Popover left</h3>
                                        <div class="popover-content">
                                            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="jp-callout jp-b-dark">
                                    <p>click 4 pop direction</p>
                                </div>

                                <div class="text-center">
                                    <button class="jp-btn jp-fb jp-danger jp-sw jp-ripple jp-w" data-toggle="popover" data-placement="left" title="" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                        <i class="fa fa-thumbs-up"></i>
                                    </button>
                                    <button class="jp-btn jp-fb jp-dark jp-sw jp-ripple jp-w" data-toggle="popover" data-placement="top" title="" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                        <i class="fa fa-star-half-o"></i>
                                    </button>
                                    <button class="jp-btn jp-fb jp-success jp-sw jp-ripple jp-w" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                        <i class="fa fa-shopping-cart"></i>
                                    </button>
                                    <button class="jp-btn jp-fb jp-primary jp-sw jp-ripple jp-w" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                        <i class="fa fa-unlock-alt"></i>
                                    </button>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>


            <!-- Tab -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Tab</h2>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a class="jp-ripple" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                                <li role="presentation"><a class="jp-ripple" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                                <li role="presentation"><a class="jp-ripple" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                                <li role="presentation"><a class="jp-ripple" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                    <p>
                                        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
                                    </p>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="profile">
                                    <p>
                                        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
                                    </p>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="messages">
                                    <p>
                                        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
                                    </p>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="settings">
                                    <p>
                                        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="tab-vertical">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs tabs-left">
                                    <li class="active"><a href="#home2" data-toggle="tab">Home</a></li>
                                    <li><a href="#profile2" data-toggle="tab">Profile</a></li>
                                    <li><a href="#messages2" data-toggle="tab">Messages</a></li>
                                    <li><a href="#settings2" data-toggle="tab">Settings</a></li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div class="tab-pane active" id="home2"><p>#home2</p><p> Raw denim you probably haven't heard of them jean shorts Austin.</p><p> Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p><p> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p></div>
                                    <div class="tab-pane" id="profile2"><p>#profile2</p><p> Raw denim you probably haven't heard of them jean shorts Austin.</p><p> Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. </p><p>Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p></div>
                                    <div class="tab-pane" id="messages2"><p>#messages2</p><p> Raw denim you probably haven't heard of them jean shorts Austin. </p><p>Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p><p> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p></div>
                                    <div class="tab-pane" id="settings2"><p>#messages2</p><p> Raw denim you probably haven't heard of them jean shorts Austin.</p><p> Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p><p> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p></div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Hover -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Hover</h2>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="jph-item">
                                        <a href="javascript:;">
                                            <div class="img">
                                                <img src="img/h1.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="info-mask jp-primary"></div>
                                                <div class="info-content">
                                                    <div class="info-inner">
                                                        <h3>Heading Here</h3>
                                                        <p>Description goes here</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="jph-item">
                                        <a href="javascript:;">
                                            <div class="img">
                                                <img src="img/h2.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="info-mask jp-success"></div>
                                                <div class="info-content">
                                                    <div class="info-inner">
                                                        <h3>Heading Here</h3>
                                                        <p>Description goes here</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="jph-item">
                                        <a href="javascript:;">
                                            <div class="img">
                                                <img src="img/h3.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="info-mask jp-info"></div>
                                                <div class="info-content">
                                                    <div class="info-inner">
                                                        <h3>Heading Here</h3>
                                                        <p>Description goes here</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row clearfix">
                <!-- Progressbar Linear -->
                <div class="col-lg-6">
                    <h2 class="section-header">Progressbar Linear</h2>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="progress">
                                <div id="progressbar1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                                    <span class="sr-only">45% Complete</span>
                                </div>
                            </div>
                            <div class="divider divider-dashed"></div>
                            <div class="progress">
                                <div id="progressbar5" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
                                    <span class="sr-only">25% Complete</span>
                                </div>
                            </div>
                            <div class="divider divider-dashed"></div>
                            <div class="progress">
                                <div id="progressbar6" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
                                    <span class="sr-only">15% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div id="progressbar7" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
                                    <span class="sr-only">65% Complete</span>
                                </div>
                            </div>
                            <div class="divider divider-dashed"></div>
                            <div class="progress">
                                <div id="progressbar8" class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
                                    <span class="sr-only">25% Complete</span>
                                </div>
                            </div>
                            <div class="divider divider-dashed"></div>
                            <div class="progress active">
                                <div id="progressbar2" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div id="progressbar3" class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div id="progressbar4" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <div class="divider divider-dashed"></div>
                            <div class="progress progress-xs">
                                <div id="progressbar11" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
                                    <span class="sr-only">25% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Progressbar Circular -->
                <div class="col-lg-6">
                    <h2 class="section-header">Progressbar Circular</h2>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div id="progress-circular1" class="progress-circular jp-bs-primary lg-circular" role="progress-circular" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div id="progress-circular2" class="progress-circular jp-bs-success" role="progress-circular" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div id="progress-circular4" class="progress-circular jp-bs-info" role="progress-circular" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div id="progress-circular3" class="progress-circular jp-bs-dark sm-circular" role="progress-circular" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="divider divider-dashed"></div>
                                    <div class="progress progress-m">
                                        <div id="progressbar9" class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%">
                                            <span class="sr-only">35% Complete</span>
                                        </div>
                                    </div>
                                    <div class="progress progress-s">
                                        <div id="progressbar10" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
                                            <span class="sr-only">25% Complete</span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pagination -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Pagination</h2>
            </div>

            <div class="row">
                <div class="col-md-12">


                            <div class="row">
                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                    <div class="panel-body">
                                    <nav>
                                        <ul class="pagination" id="pagination1">
                                            <li>
                                                <a href="#" aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                            <li class="active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li>
                                                <a href="#" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                    <div class="divider divider-dashed"></div>
                                    <nav>
                                        <ul class="pagination" id="pagination2">
                                            <li>
                                                <a href="#" aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                            <li class="active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li>
                                                <a href="#" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                        <div class="jp-callout jp-b-system">
                                            <span>Page: <span id="page-content2">1</span> / <span id="page-total2">35</span></span>
                                        </div>
                                        </div>
                                        </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <nav>
                                                <ul class="pagination pagination-lg" id="pagination3">
                                                    <li>
                                                        <a href="#" aria-label="Previous">
                                                            <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                    </li>
                                                    <li class="active"><a href="#">1</a></li>
                                                    <li><a href="#">2</a></li>
                                                    <li><a href="#">3</a></li>
                                                    <li><a href="#">4</a></li>
                                                    <li><a href="#">5</a></li>
                                                    <li>
                                                        <a href="#" aria-label="Next">
                                                            <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                            <div class="divider divider-dashed"></div>
                                            <nav>
                                                <ul class="pagination pagination-sm" id="pagination4">
                                                    <li>
                                                        <a href="#" aria-label="Previous">
                                                            <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                    </li>
                                                    <li class="active"><a href="#">1</a></li>
                                                    <li><a href="#">2</a></li>
                                                    <li><a href="#">3</a></li>
                                                    <li><a href="#">4</a></li>
                                                    <li><a href="#">5</a></li>
                                                    <li>
                                                        <a href="#" aria-label="Next">
                                                            <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>

                                            <div class="jp-callout jp-b-dark">
                                                <span>Page: <span id="page-content">1</span> / <span id="page-total">35</span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                </div>
            </div>


            <!-- Labels & Badges -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Labels & Badges</h2>
            </div>
            <div class="row text-center">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <p>
                                <span class="label jp-default">Default label</span>
                                <span class="space"></span>
                                <span class="label jp-primary">Primary</span>
                                <span class="space"></span>
                                <span class="label jp-success">Success</span>
                            </p>
                            <p>
                                <span class="label jp-info">Info</span>
                                <span class="space"></span>
                                <span class="label jp-warning">Warning</span>
                                <span class="space"></span>
                                <span class="label jp-danger">Danger</span>
                            </p>
                        </div>
                        <span class="panel-label">Labels</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <p>
                                <span class="badge">7</span>
                                <span class="space"></span>
                                <span class="badge jp-primary">11</span>
                                <span class="space"></span>
                                <span class="badge jp-success">21</span>
                            </p>
                            <p>
                                <span class="badge jp-info">14</span>
                                <span class="space"></span>
                                <span class="badge jp-warning">18</span>
                                <span class="space"></span>
                                <span class="badge jp-danger">116</span>
                            </p>
                        </div>
                        <span class="panel-label">Badges</span>
                    </div>
                </div>
            </div>

            <!-- Collapse -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Collapse</h2>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                Collapsible Group Item #1
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                        <div class="panel-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                Collapsible Group Item #2
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                        <div class="panel-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingThree">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                Collapsible Group Item #3
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                        <div class="panel-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
                                                Collapsible Group Item #1
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                        <div class="panel-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"  href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo">
                                                Collapsible Group Item #2
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                        <div class="panel-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"  href="#collapseThree2" aria-expanded="false" aria-controls="collapseThree">
                                                Collapsible Group Item #3
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                        <div class="panel-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div  class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <button class="jp-btn jp-info jp-sw jp-ripple" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                Button with data-target
                            </button>
                            <div class="divider divider-md"></div>
                            <div class="collapse" id="collapseExample">
                                <div class="well">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Alert -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Alert</h2>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-warning alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>
                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-primary alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>

                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-success alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>

                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-info alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>
                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-alert alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>
                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>
                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-system alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>
                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-dark alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>
                            <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
                                <div class="alert alert-default alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>

                            <button type="button" id="alert" class="jp-btn jp-primary jp-sw jp-ripple">Fade Alert</button>
                            <button type="button" id="toggle" class="jp-btn jp-success jp-sw jp-ripple">Toggle Alert</button>
                            <div class="divider divider-md"></div>
                            <div class="bs-example bs-example-standalone hide" id="showalert" data-example-id="dismissible-alert-js">
                                <div class="alert alert-warning alert-dismissible fade in" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <i class="fa fa-info pr10"></i><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
                                </div>
                            </div>
                    </div>
                </div>
                </div>
            </div>

            <!-- Callout -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Callout</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="jp-callout jp-b-success">
                                <h4>Callout heading</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?</p>
                            </div>

                            <div class="jp-callout jp-b-primary">
                                <h4>Callout heading</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?</p>
                            </div>

                            <div class="jp-callout jp-b-warning">
                                <h4>Callout heading</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?</p>
                            </div>
                            <div class="jp-callout jp-b-danger">
                                <h4>Callout heading</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Well -->
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Well</h2>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="well">Look, I'm in a well!</div>
                            <div class="well well-lg">Look, I'm in a well!</div>
                            <div class="well well-sm">Look, I'm in a well!</div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Thumbnails Custom Content -->
            <div class="row clearfix">
                <div class="col-lg-8 ">
                    <h2 class="section-header">Thumbnails Custom Content</h2>
                </div>
            </div>


            <div class="row clearfix">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img  alt="100%x200" src="img/h1.jpg" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p><a href="#" class="jp-btn jp-primary jp-sw jp-ripple" role="button">Button</a> <a href="#" class="jp-btn jp-default jp-sw jp-ripple" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img alt="100%x200" src="img/h2.jpg" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p><a href="#" class="jp-btn jp-primary jp-sw jp-ripple" role="button">Button</a> <a href="#" class="jp-btn jp-default jp-sw jp-ripple" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img data-src="holder.js/100%x200" alt="100%x200" src="img/h3.jpg" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p><a href="#" class="jp-btn jp-primary jp-sw jp-ripple" role="button">Button</a> <a href="#" class="jp-btn jp-default jp-sw jp-ripple" role="button">Button</a></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Media Objects -->
            <div class="row clearfix">
                <div class="col-lg-8 ">
                    <h2 class="section-header">Media Objects</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <ul class="media-list">
                                <li class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" alt="64x64" src="img/t.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                        <!-- Nested media object -->
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" alt="64x64" src="img/t.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Nested media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                                <!-- Nested media object -->
                                                <div class="media">
                                                    <div class="media-left">
                                                        <a href="#">
                                                            <img class="media-object" alt="64x64" src="img/t.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">Nested media heading</h4>
                                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Nested media object -->
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" alt="64x64" src="img/t.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Nested media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                            <div class="divider divider-dashed"></div>
                            <div class="media">
                                <div class="media-body">
                                    <h4 class="media-heading">Media heading</h4>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                </div>
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object"  alt="64x64" src="img/t.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </section>
    </div>
</div>






<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/treeview.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/icheck.min.js"></script>
<script src="js/jpripple.js"></script>
<script src="js/pgcircular.js"></script>
<script src="js/jquery.twbsPagination.min.js"></script>
<script src="js/all.js"></script>
<script>
    $(document).ready(function(){
        ComponentsInit();
    });
</script>
</body>
</html>